﻿<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<script type="text/javascript" src="lib/Vue/vue.js"></script>
<script type="text/javascript" src="lib/Vue/axios.min.js"></script>
<script type="text/javascript" src="lib/Vue.util/axiosUtils.js"></script>
<script src="vendor/jquery/jquery.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5shiv.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
<link href="static/h-ui/css/H-ui.min.css" rel="stylesheet"
	type="text/css" />
<link href="static/h-ui.admin/css/H-ui.login.css" rel="stylesheet"
	type="text/css" />
<link href="static/h-ui.admin/css/style.css" rel="stylesheet"
	type="text/css" />
<link href="lib/Hui-iconfont/1.0.8/iconfont.css" rel="stylesheet"
	type="text/css" />
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template-->
<link href="vendor/font-awesome/css/font-awesome.min.css"
	rel="stylesheet" type="text/css">
<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>跨境电商平台</title>
<meta name="keywords"
	content="跨境电商平台">
<meta name="description"
	content="跨境电商平台">
</head>
<body>
	<div id="app">
		<input type="hidden" id="TenantId" name="TenantId" value="" />
		<div class="header">
			<font color="white" size="6">跨境电商平台</font>
		</div>
		<div class="loginWraper">
			<div id="loginform" class="loginBox">
				<form class="form form-horizontal" action="#" th:action="@{/userlogin}" th:object="${user}" method="post">
						<div class="row cl">
						<label class="form-label col-xs-3"><i class="Hui-iconfont">&#xe60d;</i></label>
						<div class="formControls col-xs-8">
							 <input type="text"  id="username" name="username"  placeholder="用户名"  class="input-text size-L"
							 style="width:400px;" />
						</div>
					</div>
					<div class="row cl">
						<label class="form-label col-xs-3"><i class="Hui-iconfont">&#xe60e;</i></label>
						<div class="formControls col-xs-8">
							 <input type="password" id="password" name="password" placeholder="密码"  class="input-text size-L"
							 style="width:400px;"  />
							<span class="help-block" style = "font-jweight:bold"><font color='red'  th:text="${error}"></font></span>
						</div>
					</div>
					<div class="row cl">
						<div class="formControls col-xs-8 col-xs-offset-3">
								<!-- <input type="checkbox" name="online" id="online" value="">
                                使我保持登录状态</label> -->
								<div class="mt-20 skin-minimal">
									<div class="radio-box">
										<input type="radio" id="bvo" name="role" value="bvo">
										<label for="bvo">借卖方</label>
									</div>
									<div class="radio-box">
										<input type="radio" id="mvo" name="role" value="mvo" checked>
										<label for="mvo">品牌商</label>
									</div>
									<div class="radio-box">
										<input type="radio" id="adm" name="role" value="adm" >
										<label for="adm">系统管理员</label>
									</div>
								</div>
						</div>
					</div>

					<div class="row cl">
						<div class="formControls col-xs-8 col-offset-3">
					  <input type="text" value=""  placeholder="请输入验证码（不区分大小写）" class="input-val">
					  <canvas id="canvas" width="100" height="30"></canvas>
					  <!-- <button class="btn">提交</button> -->
						</div>
					 </div>
					<div class="row cl">
						<div class="formControls col-xs-3 col-xs-offset-3">
							<input name="" id="login"  class="btn btn-success radius size-L" type="button" value="登录">
							<button  id="btn" type="submit" style="display:none"></button>
						</div>
					</div>
				</form>
		</div>
		<div class="footer">create by liuq</div>
	</div>
	<script type="text/javascript">
		$(function(){
			  var show_num = [];
			  draw(show_num);
			  $("#canvas").on('click',function(){
			   draw(show_num);
			  })
			  $(".btn").on('click',function(){
			   var val = $(".input-val").val().toLowerCase();
			   var num = show_num.join("");
			   if($("#username").val()==""){
					 alert('输入用户名不能为空');
			    }else if($("#password").val()==""){
						 alert('输入密码不能为空');
				}else if(val==''){
			    		alert('请输入验证码！');
			    }else if(val == num){
			    		$(".input-val").val('');
			    		$('#btn').trigger("click");
			    }else{
			    		alert('验证码错误！请重新输入！');
			    $(".input-val").val('');
			    // draw(show_num);
			   }
			  })
			 })
			 //生成并渲染出验证码图形
			 function draw(show_num) {
			  var canvas_width=$('#canvas').width();
			  var canvas_height=$('#canvas').height();
			  var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
			  var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
			  canvas.width = canvas_width;
			  canvas.height = canvas_height;
			  var sCode = "a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
			  var aCode = sCode.split(",");
			  var aLength = aCode.length;//获取到数组的长度
			  for (var i = 0; i < 4; i++) { //这里的for循环可以控制验证码位数（如果想显示6位数，4改成6即可）
			   var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
			   // var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
			   var deg = Math.random() - 0.5; //产生一个随机弧度
			   var txt = aCode[j];//得到随机的一个内容
			   show_num[i] = txt.toLowerCase();
			   var x = 10 + i * 20;//文字在canvas上的x坐标
			   var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
			   context.font = "bold 23px 微软雅黑";
			   context.translate(x, y);
			   context.rotate(deg);
			   context.fillStyle = randomColor();
			   context.fillText(txt, 0, 0);
			   context.rotate(-deg);
			   context.translate(-x, -y);
			  }
			  for (var i = 0; i <= 5; i++) { //验证码上显示线条
			   context.strokeStyle = randomColor();
			   context.beginPath();
			   context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
			   context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
			   context.stroke();
			  }
			  for (var i = 0; i <= 30; i++) { //验证码上显示小点
			   context.strokeStyle = randomColor();
			   context.beginPath();
			   var x = Math.random() * canvas_width;
			   var y = Math.random() * canvas_height;
			   context.moveTo(x, y);
			   context.lineTo(x + 1, y + 1);
			   context.stroke();
			  }
			 }
			 //得到随机的颜色值
			 function randomColor() {
			  var r = Math.floor(Math.random() * 256);
			  var g = Math.floor(Math.random() * 256);
			  var b = Math.floor(Math.random() * 256);
			  return "rgb(" + r + "," + g + "," + b + ")";
			 }
	</script>
</body>
</html>